<template>
    <div class="home-view has-header">
        <sub-nav mold="quickNav"></sub-nav>
        <list :items="events" mold="thumbnail"></list>
        <infinite-loading spinner="bubbles" :on-infinite="onInfinite" ref="infiniteLoading">
                <loading slot="spinner"></loading>
        </infinite-loading>
    </div>
</template>
<script>
import InfiniteLoading from 'vue-infinite-loading'
import SubNav from '../components/SubNav'
import List from '../components/List'
import Loading from '../components/Loading'

import { mapState, mapActions } from 'vuex';

export default {
    name: 'home-view',
    data(){
        return {

        }
    },
    components: {
        SubNav,
        List,
        Loading,
        InfiniteLoading
    },
    computed: {
        ...mapState({
            events: state => state.activities.events
        })
    },
    methods: {
        onInfinite() {
            setTimeout(() => {
                this.loadMore();
                this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
            }, 1000)
        },
        ...mapActions([
            'loadMore'
        ])
    }
}
</script>

<style lang="scss" scoped>
.sub-nav {
    margin: 0 1.8rem;
    padding-top: 0.2rem;
}
</style>
